/* @media screen and (min-width:0\0) */

@charset'utf-8';
@import'../../open_scss/theme';
@import'../../open_scss/color';
@import'../../open_scss/model';
.sign {
    @include breakLine;
    box-sizing: border-box;
    width: 100%;
    padding: 0.4rem;
    overflow: hidden;
    // padding-bottom: 4rem;
    *{
        box-sizing: border-box;
    }
    .L-input{
        margin-bottom: 48px;
    }
    .sign_in {
        overflow: hidden;
        display: inline-block;
        position: relative;
        vertical-align: top;
        box-shadow: 0 1px 6px 1px rgba($black, 0.3);
        width: 100%;
        margin-top: 1.5rem;
        min-height: 5rem;
        background-color: $white;
        margin-left: 0;
        @include comic(0.2);
        a {
            text-shadow: 0 1px 5px black;
            color: $fontColor;
        }
        .inputform {
            display: inline-block;
            min-height: 2rem;
            position: relative;
            width: 100%;
            padding: 2.5rem 6% 2.5rem 2%;
            height: 233px;
            overflow: hidden;
            @include breakLine;
            @include comic_1(0.2);
            &.focus {
                height: 305px;
                .inbox {
                    // margin-left: -120%;
                    transform: translateX(-120%);
                }
                .upbox{
                    transform: translateX(-120%);
                }
            }
            .inbox, .upbox {
                @include comic(0.3);
                margin-left: 0;
                margin-right: 20%;
                display: inline-block;
                vertical-align: top;
                width: 100%;
            }
            .checkcode {
                margin-top: -20px;
                display: block;
                color: $themeColor;
                text-shadow: 0 1px 2px;
                &.focus {
                    color: $gray;
                }
            }
        }
        .readbox {
            position: relative;
            min-height: 3rem;
            background-color: $themeColor;
            width: 100%;
            padding: 2rem 5%;
            line-height: 2rem;
            font-size: 15px;
            .item {
                margin: .75rem 0;
            }
            .btn {
                right: 0;
                border-radius: 50%;
                width: 4rem;
                height: 4rem;
                background-color: $btnHover;
                border: 0;
                padding: 0;
                color: $fontColor;
                position: absolute;
                z-index: 998;
            }
            div.btn {
                box-shadow: 0 5px 15px 1px rgba($black, 0.8)!important;
                right: 1rem;
                top: -2rem;
                @include comic_1(0.3);
            }
        }
    }
    .sign-bus{
         &.focus {
            transform: translateX(-100%);
            opacity: 0;
        }
        &.blur{
            transform: translateX(0);
        }
    }
    .sign-user{
         &.focus {
            opacity: 0;
            transform: translateX(0);
        }
        &.blur{
            transform: translateX(-100%);
        }
    }
}
